<template>
  <div class="echarts-wrap">
    <mpvue-f2  :f2="f2" :onInit="onInit" canvasId="demo-canvas"/>
    <scroll-view v-if="userData" scroll-y :style="{height:scrollHeight+'px'}">
    <div id="f2" class="dataBar">
      <div v-if="mode==0">
        <div class="tiele">体重</div>
        <div class="weui-flex flex">
          <div class="weui-flex__item item">
            <div class="top weight">
              <div class="num">{{weightMax}}</div>
              <div class="nums">Kg</div>
            </div>
            <div class="bottom">最高值</div>
          </div>
          <div class="weui-flex__item item">
            <div class="top weight">
              <div class="num">{{weightMin}}</div>
              <div class="nums">Kg</div>
            </div>
            <div class="bottom">最低值</div>
          </div>
          <div class="weui-flex__item item">
            <div class="top weight">
              <div class="num">{{weightAve}}</div>
              <div class="nums">Kg</div>
            </div>
            <div class="bottom">平均值</div>
          </div>
        </div>
      </div>
      <div v-if="mode==1">
        <div class="tiele">舒张压</div>
        <div class="weui-flex flex">
          <div class="weui-flex__item item">
            <div class="top SP">
              <div class="num">{{SPMax}}</div>
            </div>
            <div class="bottom">最高值</div>
          </div>
          <div class="weui-flex__item item">
            <div class="top SP">
              <div class="num">{{SPMin}}</div>
            </div>
            <div class="bottom">最低值</div>
          </div>
          <div class="weui-flex__item item">
            <div class="top SP">
              <div class="num">{{SPAve}}</div>
            </div>
            <div class="bottom">平均值</div>
          </div>
        </div>
      </div>
      <div v-if="mode==1">
        <div class="tiele">收缩压</div>
        <div class="weui-flex flex">
          <div class="weui-flex__item item">
            <div class="top DP">
              <div class="num">{{DPMax}}</div>
            </div>
            <div class="bottom">最高值</div>
          </div>
          <div class="weui-flex__item item">
            <div class="top DP">
              <div class="num">{{DPMin}}</div>
            </div>
            <div class="bottom">最低值</div>
          </div>
          <div class="weui-flex__item item">
            <div class="top DP">
              <div class="num">{{DPAve}}</div>
            </div>
            <div class="bottom">平均值</div>
          </div>
        </div>
      </div>
      
      <div v-if="mode==1">
        <div class="tiele">脉搏</div>
        <div class="weui-flex flex">
          <div class="weui-flex__item item">
            <div class="top Pulse">
              <div class="num">{{PulseMax}}</div>
              <div class="nums">bpm</div>
            </div>
            <div class="bottom">最高值</div>
          </div>
          <div class="weui-flex__item item">
            <div class="top Pulse">
              <div class="num">{{PulseMin}}</div>
              <div class="nums">bpm</div>
            </div>
            <div class="bottom">最低值</div>
          </div>
          <div class="weui-flex__item item">
            <div class="top Pulse">
              <div class="num">{{PulseAve}}</div>
              <div class="nums">bpm</div>
            </div>
            <div class="bottom">平均值</div>
          </div>
        </div>
      </div>
    </div>
    </scroll-view>
  </div>
</template>

<script>
import mpvueF2 from "mpvue-f2";
const F2 = require("@antv/f2");
const db = wx.cloud.database();
const _ = db.command;

let chart = null;

function initChart(canvas, width, height) {
  chart = new F2.Chart({
    el: canvas,
    width,
    height
  });

  chart.tooltip({
    custom: true,
    showCrosshairs: true,
    onChange(obj) {
      const legend = chart.get("legendController").legends.top[0];
      const tooltipItems = obj.items;
      const legendItems = legend.items;
      const map = {};
      legendItems.map(item => {
        map[item.name] = Object.assign({}, item);
      });
      tooltipItems.map(item => {
        const { name, value } = item;
        if (map[name]) {
          map[name].value = value;
        }
      });
      legend.setItems(Object.values(map));
    },
    onHide() {
      const legend = chart.get("legendController").legends.top[0];
      legend.setItems(chart.getLegendItems().country);
    }
  });

  // chart.guide().rect({
  //   start: [3/2, "max"],
  //   end: ["max", "min"],
  //   style: {
  //     fill: "#CCD6EC",
  //     opacity: 0.3
  //   }
  // });
  // chart.guide().text({
  //   position: [3/2, "max"],
  //   content: "1",
  //   style: {
  //     fontSize: 10,
  //     textBaseline: "top"
  //   }
  // });

  chart
    .line()
    .position("day*value")
    .color("type", val => {
      if (val === "平均(kg)") {
        return "#CCD6EC";
      }else if (val === "体重(kg)") {
        return "#7acfdf";
      }else if (val === "收缩压(mmHg)") {
        return "#f9ad8d";
      }else if (val === "舒张压(mmHg)") {
        return "#f47645";
      }else if (val === "脉搏(bpm)") {
        return "#b73535";
      }
      
    });

  return chart;
}

export default {
  components: {
    mpvueF2
  },
  data() {
    return {
      weightAve: 0,
      weightMax: 0,
      weightMin: 0,
      DPAve: 0,
      DPMax: 0,
      DPMin: 0,
      SPAve: 0,
      SPMax: 0,
      SPMin: 0,
      PulseAve: 0,
      PulseMax: 0,
      PulseMin: 0,
      scrollHeight:0,
      f2: F2,
      onInit: initChart,
      mode: 10,
      todayData: [2019 / 1 / 1],
      userData: []
    };
  },
  onLoad() {
    const { query } = this.$root.$mp;
    this.mode = query.mode;
    this.todayData = query.todayData;
    this.getDate();
    //获取f2标签高度

    wx.getSystemInfo({
      success: res => {
        console.log(res)
        var windowHeight = res.windowHeight;
        var a = 750 / res.windowWidth
        this.scrollHeight = windowHeight -(600/a);
      }
    });
  },
  methods: {
    getDate() {
      var dateMax = new Date(this.todayData + " " + 23 + ":" + 59 + ":" + 59);
      console.log(dateMax);
      db
        .collection("userData")
        .orderBy("mode", "asc")
        .orderBy("time", "asc")
        .where({
          mode: parseInt(this.mode),
          _openid: wx.getStorageSync('openid')
          //time:_.gte(dateMax),
          //date:_.gt(dateMin)
        })
        .get({
          success: res => {
            let userData = res.data;
            console.log(userData);
            //转换日期
            for (var i = 0; i < userData.length; i++) {
              var Y = userData[i].time.getFullYear() + "/";
              var M = userData[i].time.getMonth() + 1 + "/";
              var D = userData[i].time.getDate() + " ";
              var h = userData[i].time.getHours() + ":";
              var m = userData[i].time.getMinutes();
              var s = userData[i].time.getSeconds();
              userData[i].time = M + D;
            }
            this.userData = res.data;
            this.chuli();
          }
        });
    },
    chuli() {
      var ChartData = [];
      var ChartTicks = [];

      let userData = this.userData;

      if (this.mode == 0) {
        var weightSum = 0;
        var weightData = [];
        //计算平均数
        for (var i = 0; i < userData.length; i++) {
          weightSum = weightSum + parseInt(userData[i].weight);
        }
        this.weightAve = (weightSum / userData.length).toFixed(1);
        //push数据
        for (var i = 0; i < userData.length; i++) {
          weightData.push(userData[i].weight);
          //push日期
          ChartTicks.push(userData[i].time);
          ChartData.push({
            day: userData[i].time,
            type: "体重(kg)",
            value: parseInt(userData[i].weight)
          });
          ChartData.push({
            day: userData[i].time,
            type: "平均(kg)",
            value: weightSum / userData.length
          });
          console.log(ChartTicks);
        }
        //计算最大值
        this.weightMax = Math.max(...weightData);
        //计算最小值
        this.weightMin = Math.min(...weightData);
      } else {
        var DPSum = 0;
        var SPSum = 0;
        var PulseSum = 0;
        var DPData = [];
        var SPData = [];
        var PulseData = [];
        for (var i = 0; i < userData.length; i++) {
          //push日期
          ChartTicks.push(userData[i].time);
          ChartData.push({
            day: userData[i].time,
            type: "舒张压(mmHg)",
            value: parseInt(userData[i].SP)
          });
          ChartData.push({
            day: userData[i].time,
            type: "收缩压(mmHg)",
            value: parseInt(userData[i].DP)
          });
          ChartData.push({
            day: userData[i].time,
            type: "脉搏(bpm)",
            value: parseInt(userData[i].Pulse)
          });

          //计算总和
          DPSum = DPSum + parseInt(userData[i].DP);
          SPSum = SPSum + parseInt(userData[i].SP);
          PulseSum = PulseSum + parseInt(userData[i].Pulse);
          //push数组
          DPData.push(userData[i].DP);
          SPData.push(userData[i].SP);
          PulseData.push(userData[i].Pulse);
        }
        //计算平均值
        this.DPAve = (DPSum / userData.length).toFixed(0);
        this.SPAve = (SPSum / userData.length).toFixed(0);
        this.PulseAve = (PulseSum / userData.length).toFixed(0);
        //计算最大值
        this.DPMax = Math.max(...DPData);
        this.SPMax = Math.max(...SPData);
        this.PulseMax = Math.max(...PulseData);
        //计算最小值
        this.DPMax = Math.min(...DPData);
        this.SPMax = Math.min(...SPData);
        this.PulseMax = Math.min(...PulseData);
      }

      const data = ChartData;
      chart.source(data, {
        day: {
          range: [0, 1],
          ticks: ChartTicks
        },
        value: {
          tickCount: 10,
          formatter(val) {
            return val.toFixed(0);
          }
        }
      });
      chart.render();
      //option.series = series;
      //option.xAxis = xAxis;
      //chart.setOption(option);
    }
  }
};
</script>

<style lang="less">
.echarts-wrap {
  width: 100%;
  height: 300px;
  .dataBar {
    margin: 20rpx;
    .tiele {
      font-size: 50rpx;
      line-height: 100rpx;
      font-weight: 500;
      margin-left: 20rpx;
      color: #63686e;
    }
    .weight{
      background-color: #7acfdf;
    }
    .SP{
      background-color: #f47645;
    }
    .DP{
      background-color: #f9ad8d;
    }
    .Pulse{
      background-color: #b73535;
    }
    .top {
      text-align: center;
      height: 150rpx;
      margin: 10rpx 43.3rpx;
      
      border-radius: 20rpx;
      .num {
        display: inline-block;
        line-height: 150rpx;
        color: #ffffff;
        font-size: 50rpx;
        font-weight: 500;
      }
      .nums {
        display: inline-block;
        color: #ffffff;
        font-size: 30rpx;
      }
    }
    .bottom {
      font-size: 30rpx;
      color: #63686e;
      text-align: center;
    }
  }
}
</style>
